import React, { Component } from 'react';
import { HashRouter as Router, Route,Redirect   } from 'react-router-dom'
import {  TabBar } from 'antd-mobile'
import {
    AppOutline,
    UnorderedListOutline,
    UserOutline,
  } from 'antd-mobile-icons'

  import SellerList from './compoments/SellerList/SellerList.js'

import './Home.scss'
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  

        }
    }

    componentDidMount(){
        console.info('componentDidMount')
    }

    tabs = [
        {
          key: 'home',
          title: '首页',
          icon: <AppOutline />,
        },
        {
          key: 'todo',
          title: '我的待办',
          icon: <UnorderedListOutline />,
        },
        
        {
          key: 'personalCenter',
          title: '个人中心',
          icon: <UserOutline />,
        },
    ]

    render() { 
        return (
            <div  className="Home">
                <div className='router-view'>
                    <Router>
                        <Route path="/home" >
                            <SellerList ></SellerList>
                        </Route>
                    </Router>
                </div>
                <TabBar className=''>
                    {this.tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        );
    }
}
 
export default Home;